<template>
  <div class='kanBan'>
    <div class="kanban-header">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="quantity">
              <img src="../../assets/ft-xczx/load3.png"
                   alt="">
              <span class="zero">0</span>
              <span>今日访问量</span>
            </div>
            <div class="quantity">
              <img src="../../assets/ft-xczx/load1.png"
                   alt="">
              <span class="zero">0</span>
              <span>新增用户量</span>
            </div>
            <div class="quantity">
              <img src="../../assets/ft-xczx/load2.png"
                   alt="">
              <span class="zero">0</span>
              <span>今日购买量</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div class="header-right">
              <div><i></i><span>课程访问量</span><span>课程购买量</span><span>听课人数</span><span>机构数</span></div>
              <div><i>总量</i><span>0</span><span>0</span><span>0</span><span>0</span></div>
              <div><i>昨日</i><span>0</span><span>0</span><span>0</span><span>0</span></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="kanban-body">
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="在线听课人数"
                     name="first">
          <div class="coursesonline"></div>
        </el-tab-pane>
        <el-tab-pane label="课程购买量"
                     name="second">
          <div class="coursesonlineTwo"
               style="width:1421px;height:500px"></div>
        </el-tab-pane>
        <el-tab-pane label="课程访问量"
                     name="third">
          <div class="coursesonlineTre"
               style="width:1421px;height:500px"></div>
        </el-tab-pane>
      </el-tabs>
      <div class="bodyRight">
        <div class="bodyRightL">
          <el-button size="small"
                     @click="onDateClick('isWeekShow')"
                     :class="{buttonbgc:isWeekShow}">按周</el-button>
          <el-button size="small"
                     @click="onDateClick('isMonthShow')"
                     :class="{buttonbgc:isMonthShow}">按月</el-button>
          <el-button size="small"
                     @click="onDateClick('isYearShow')"
                     :class="{buttonbgc:isYearShow}">按年</el-button>
        </div>
        <div class="bodyRightR">
          <div class="block">
            <el-date-picker v-model="value1"
                            :type="pickerType"
                            :format="pickerFormat"
                            placeholder="选择日期"
                            size="small"
                            @change="changeweek">
            </el-date-picker>
          </div>
          <!-- <div class="block"
               v-show="isMonthShow">

            <el-date-picker v-model="value2"
                            type="month"
                            format="yyyy 年 M 月"
                            placeholder="选择月"
                            size="small">
            </el-date-picker>
          </div> -->
          <!-- <div class="block"
               v-show="isYearShow">

            <el-date-picker v-model="value3"
                            type="year"
                            format="yyyy 年"
                            placeholder="选择年"
                            size="small">
            </el-date-picker>
          </div> -->
        </div>
      </div>
    </div>
    <div class="kanban-footer">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="footerLeftTab"
                 @click="$router.push('/subjectRank')">本周热门课程TOP5</div>
            <el-table :data="courseUserList"
                      stripe
                      style="width: 95%">
              <el-table-column type="index"
                               label="排名">
              </el-table-column>
              <el-table-column prop="courseName"
                               label="搜索关键字"
                               width="380px">
              </el-table-column>
              <el-table-column prop="userNum"
                               label="用户数">
              </el-table-column>
              <el-table-column prop="weekPercent"
                               label="涨幅"
                               width="100px">
                <template slot-scope="scope">
                  {{scope.row.weekPercent+'%'}}
                  <i class="el-icon-bottom"
                     style="color: rgb(153, 231, 164);"
                     v-if="scope.row.weekPercent<=0"></i>
                  <i class="el-icon-top"
                     style="color: rgb(237, 122, 145);"
                     v-else></i>
                </template>
              </el-table-column>
            </el-table>
            <span class="bottomTop"><i class="el-icon-caret-top">
              </i><i class="el-icon-caret-bottom"></i>
            </span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div class="footerRightTab"
                 @click="$router.push('/frequencyDistribution')">本周学习频次分布</div>
            <div ref="chart1"
                 style="width:100%;height:376px"></div>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="footer_left">
      </div>
      <div class="footer_right">2</div>
       -->
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {
  getCourseOnline,
  getCourseUser,
  getCourseFrequencyDistribution,
  getCourseBuy,
  getCourseVisit
} from '@/api/index'
export default {
  name: 'kanBan',
  components: {},
  props: {},
  data() {
    return {
      activeName: 'first',
      isWeekShow: true,
      isMonthShow: false,
      isYearShow: false,
      value1: new Date(),
      value2: '',
      value3: '',
      startDate: '',
      pickerType: 'week',
      pickerFormat: 'yyyy 第 WW 周',
      endDate: '',
      courseUserList: [],
      // echarts图表
      options: {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0.4,
          borderColor: '#fff',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true,
            areaStyle: {
              color: '#f3fffe'
            },
            lineStyle: {
              color: '#2075f1'
            }
          }
        ]
      },
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          splitLine: { show: false },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          min: 6000, //取0为最小刻度
          max: 10000, //取100为最大刻度
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 15
          }
        },
        series: [
          {
            type: 'bar',
            data: [],
            barWidth: 16,
            barGap: 10,
            smooth: true,
            label: {
              normal: {
                // show: true,
                position: 'right',
                offset: [5, -2],
                textStyle: {
                  color: '#F68300',
                  fontSize: 13
                }
              }
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7
              },
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#3977E6' },
                  { offset: 1, color: '#37BBF8' }
                ])
              }
            }
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    // tab栏切换
    handleClick() {
      console.log(this.activeName)
      this.loadCourseOnline()
    },
    // 周月年按钮切换
    onDateClick(type) {
      // console.log(this.value1)
      if (type === 'isWeekShow') {
        this.isWeekShow = true
        this.isMonthShow = false
        this.isYearShow = false
        this.pickerType = 'week'
        this.pickerFormat = 'yyyy 第 WW 周'
      } else if (type === 'isMonthShow') {
        this.isWeekShow = false
        this.isMonthShow = true
        this.isYearShow = false
        this.pickerType = 'month'
        this.pickerFormat = 'yyyy 年 M 月'
      } else {
        this.isWeekShow = false
        this.isMonthShow = false
        this.isYearShow = true
        this.pickerType = 'year'
        this.pickerFormat = 'yyyy 年'
      }
      this.changeweek()
    },
    // 请求模块
    async loadCourseOnline() {
      this.options.xAxis.data = []
      this.options.series[0].data = []
      if (this.activeName === 'first') {
        const { data } = await getCourseOnline({
          startDate: this.startDate,
          endDate: this.endDate
        })
        const res = data.result
        // console.log(res)
        res.forEach(item => {
          const xAxissss = this.$options.filters['formatDateTwo'](item.day)
          // console.log(xAxissss)
          this.options.xAxis.data.push(xAxissss)
          this.options.series[0].data.push(item.onlineNum)
        })
      } else if (this.activeName === 'second') {
        const { data } = await getCourseBuy({
          startDate: this.startDate,
          endDate: this.endDate
        })
        const res = data.result
        res.forEach(item1 => {
          const yAxissss = this.$options.filters['formatDateTwo'](item1.day)
          this.options.xAxis.data.push(yAxissss)
          this.options.series[0].data.push(item1.buyNum)
        })
      } else {
        const { data } = await getCourseVisit({
          startDate: this.startDate,
          endDate: this.endDate
        })
        const res = data.result
        res.forEach(item3 => {
          const zAxissss = this.$options.filters['formatDateTwo'](item3.day)
          this.options.xAxis.data.push(zAxissss)
          this.options.series[0].data.push(item3.visitNum)
        })
      }
      this.$nextTick(function() {
        this.getEchartsPic()
      })
    },
    // 日期选择器改变事件
    changeweek() {
      if (this.pickerType === 'week') {
        var d = new Date(this.value1)
        // 起始日期
        var youWant =
          d.getFullYear() +
          '-' +
          (d.getMonth() + 1 + '').padStart(2, '0') +
          '-' +
          (d.getDate() - 1 + '').padStart(2, '0')
        // 终止日期
        var d2 = new Date(+new Date(this.value1) + 5 * 86400000)
        var youWant2 =
          d2.getFullYear() +
          '-' +
          (d2.getMonth() + 1 + '').padStart(2, '0') +
          '-' +
          (d2.getDate() + '').padStart(2, '0')
        this.startDate = youWant
        this.endDate = youWant2
        // this.loadCourseOnline()
        // clearTimeout(timeout)
        // this.getEchartsPic()
        // this.weekChange()
      } else if (this.pickerType === 'month') {
        // console.log('这是month页面', this.value1)
        const dt = new Date(this.value1)
        const month = dt.getMonth() + 1
        // console.log(month)
        if ([1, 3, 5, 7, 8].includes(month)) {
          // console.log('有三十天')
          this.startDate =
            this.$options.filters['formatDateThree'](this.value1) + '-01'
          this.endDate =
            this.$options.filters['formatDateThree'](this.value1) + '-30'
        } else if (month === 2) {
          // console.log('二月')
          this.startDate =
            this.$options.filters['formatDateThree'](this.value1) + '-01'
          this.endDate =
            this.$options.filters['formatDateThree'](this.value1) + '-28'
        } else {
          // console.log('29天')
          this.startDate =
            this.$options.filters['formatDateThree'](this.value1) + '-01'
          this.endDate =
            this.$options.filters['formatDateThree'](this.value1) + '-29'
        }
      } else {
        // console.log('这是year页面', this.value1)
        const dt = new Date(this.value1)
        const year = dt.getFullYear()
        // console.log('这是year页面', year)
        if (year === 2020) {
          this.startDate = '2020-01-01'
          this.endDate = '2020-12-31'
        } else if (year === 2021) {
          this.startDate = '2021-01-01'
          this.endDate = '2021-12-31'
        } else {
          this.options.xAxis.data = []
          this.options.series[0].data = []
          return this.getEchartsPic()
        }
      }
      this.loadCourseOnline()
    },
    // 渲染echarts
    getEchartsPic() {
      if (this.activeName === 'first') {
        setTimeout(() => {
          var chartDom = document.querySelector('.coursesonline')
          var myChart = this.$echarts.init(chartDom)
          myChart.setOption(this.options)
        }, 0)
      } else if (this.activeName === 'second') {
        setTimeout(() => {
          var chartDomTwo = document.querySelector('.coursesonlineTwo')
          var myChartTwo = this.$echarts.init(chartDomTwo)
          myChartTwo.setOption(this.options)
        }, 0)
      } else {
        setTimeout(() => {
          var chartDomTre = document.querySelector('.coursesonlineTre')
          var myChartTre = this.$echarts.init(chartDomTre)
          myChartTre.setOption(this.options)
        }, 0)
      }
    },
    async loadCourseUser() {
      const { data } = await getCourseUser({
        datePickerSel: '2021-30',
        type: 'week',
        orderBy: 'userNum',
        order: 'descending',
        limit: 5
      })
      data.result.forEach(item => {
        item.weekPercent = item.weekPercent.toFixed(2)
      })
      this.courseUserList = data.result
    },
    getEchartsPicT() {
      setTimeout(() => {
        const chart = this.$refs.chart1
        if (chart) {
          const myChart = this.$echarts.init(chart)
          //初始化数据
          myChart.setOption(this.option)

          window.addEventListener('resize', function() {
            myChart.resize()
          })
        }
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function() {
            myChart.resize()
          })
        })
      }, 0)
    },
    async loadCourseFrequencyDistribution() {
      const { data } = await getCourseFrequencyDistribution({
        startDate: '2021-07-26',
        endDate: '2021-08-01'
      })
      const res = data.result
      res.forEach(item => {
        this.option.xAxis.data.push(item.frequency)
        this.option.series[0].data.push(item.distributionNum)
      })
      this.$nextTick(function() {
        this.getEchartsPicT()
      })
    }
  },
  created() {
    // this.onWeekClick()
    this.changeweek()
    this.loadCourseUser()
    this.loadCourseFrequencyDistribution()
  },
  mounted() {},
  updated() {}
}
</script>
<style lang='less'  scoped>
.kanBan {
  background-color: #f5f5f5;

  .kanban-header {
    overflow: hidden;
    margin-top: 20px;
    color: #666;
    font-size: 18px;
    .quantity {
      display: flex;

      flex-direction: column;
      // justify-content: space-around;
      align-items: center;
      float: left;
      width: 222px;
      height: 213px;
      margin-right: 13px;
      background-color: #fff;
      border-radius: 6px;
      img {
        margin-top: 25px;
        width: 62px;
        height: 62px;
      }
      .zero {
        margin: 15px 0;
        font-size: 28px;
        color: #146df2;
      }
    }
    .header-right {
      float: left;
      width: 100%;
      height: 213px;
      border-radius: 6px;

      background-color: #fff;
      div:first-child {
        margin-top: 14px;
      }
      div:nth-of-type(2) span {
        color: #5d88f3;
      }
      div:nth-of-type(3) span {
        color: #444444;
      }
      i,
      span {
        display: inline-block;
        height: 50px;
      }
      i {
        width: 120px;
        text-align: center;
        font-style: normal;
      }
      span {
        width: 140px;
      }
    }
  }
  .kanban-body {
    position: relative;
    height: 520px;
    padding: 25px;
    background-color: #fff;
    margin-top: 15px;
    color: #444444 !important;
    border-radius: 6px;
    /deep/ .el-tabs__nav-wrap::after {
      display: none;
    }
    /deep/ .el-tabs__item {
      font-size: 20px !important;
    }
    /deep/ .el-tabs__active-bar {
      height: 4px !important;
      background-color: #65ded7 !important;
      border-radius: 4px;
    }
    /deep/ .el-tabs__item.is-active {
      color: #185fef !important;
    }
    /deep/ .el-button {
      border: none !important;
    }
    .buttonbgc {
      background-color: #079fff;
      color: #fff;
    }
    .grid-date {
      padding-left: 25px;
    }
    .grid-right {
      margin-top: 10px;
    }
    .coursesonline {
      height: 500px;
      width: 1421px !important;
      // background-color: pink;
    }
    .bodyRight {
      width: 500px;
      position: absolute;
      right: 0px;
      top: 27px;
      .bodyRightR {
        margin-left: 30px;
      }
    }
    .bodyRight > div {
      display: inline-block;
    }
  }
  .kanban-footer {
    position: relative;
    height: 500px;
    margin-top: 15px;
    font-size: 20px;
    background-color: #fff !important;
    border-radius: 6px;
    padding: 20px;
    /deep/ .bg-purple {
      padding-right: 10px !important;
    }
    .footerLeftTab {
      display: inline-block;
      height: 30px;
      margin-bottom: 20px;

      border-bottom: 4px solid #65ded7;
    }
    .footerLeftTab:hover {
      color: #185fef;
    }
    .footerRightTab:hover {
      color: #185fef;
    }
    /deep/ .el-table__row {
      height: 70px;
    }
    .bottomTop {
      position: absolute;
      color: #c0c4cc;
      font-size: 14px;
      top: 67px;
      left: 584px;
      display: flex;
      flex-direction: column;
      i {
        top: 0;
        left: 0;
        position: absolute;
      }
      i:last-child {
        top: 8px;
      }
    }
    .footerRightTab {
      display: inline-block;
      height: 30px;
      margin-bottom: 20px;

      border-bottom: 4px solid #65ded7;
    }
  }
}
</style>